﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="t" %>
<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>Typps Update panel progress</h1>
 <p>The UpdatePanelProgress control in Typps is a control that displays status of a partial refresh. All controls in Typps that require to make an xmlhttp request
    to the server use this to display status while blocking the screen until the operation is done. 
    It supports</p>
        <div>First time load time :
        <%= DateTime.Now %></div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            Current time after a partial refresh is :
            <%= DateTime.Now %><asp:Button ID="Button1" runat="server" Text="Update time" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <t:UpdatePanelProgress ID="UpdatePanelProgress1" LoadingMessage="Updating time, hold on.."
        runat="server">
    </t:UpdatePanelProgress>
    <ol>
        <li>Aborting a long running operation</li>
        <li>Retrying a timed out operation</li>
        <li>Exposes clientside events you can hook into to customize it to the needs of your application</li>
        <li>Customize it's look and feel by editing a simple (2 class css style sheet)</li>
        <li>Documentation coming soon..</li>
    </ol>
    <div>
        <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">div</span><span
                        style="color: rgb(0, 0, 255);">&gt;</span>
        First time load time :
        <span style="background-color: rgb(255, 255, 0); color: Black;">&lt;%</span>= DateTime.Now <span
            style="background-color: rgb(255, 255, 0); color: Black;">%&gt;</span><span style="color: rgb(0, 0, 255);">&lt;/</span><span
                style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">&gt;</span>
    <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(199, 21, 133);">asp</span>:<span
        style="color: rgb(128, 0, 0);">UpdatePanel</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span
            style="color: rgb(0, 0, 255);">"UpdatePanel1"</span> <span style="color: rgb(255, 0, 0);">runat</span>=<span
                style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span>
        <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">ContentTemplate</span><span
            style="color: rgb(0, 0, 255);">&gt;</span>
            Current time is :
            <span style="background-color: rgb(255, 255, 0); color: Black;">&lt;%</span>= DateTime.Now <span
                style="background-color: rgb(255, 255, 0); color: Black;">%&gt;</span><span style="color: rgb(0, 0, 255);">&lt;</span><span
                    style="color: rgb(199, 21, 133);">asp</span>:<span style="color: rgb(128, 0, 0);">Button</span> <span
                        style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"Button1"</span> <span
                            style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span> <span
                                style="color: rgb(255, 0, 0);">Text</span>=<span style="color: rgb(0, 0, 255);">"Update
                                    time"</span> <span style="color: rgb(0, 0, 255);">/&gt;</span>
        <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">ContentTemplate</span><span
            style="color: rgb(0, 0, 255);">&gt;</span>
    <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(199, 21, 133);">asp</span>:<span
        style="color: rgb(128, 0, 0);">UpdatePanel</span><span style="color: rgb(0, 0, 255);">&gt;</span>
    <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">t</span>:<span
        style="color: rgb(255, 0, 0);">UpdatePanelProgress</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span
            style="color: rgb(0, 0, 255);">"UpdatePanelProgress1"</span> <span style="color: rgb(255, 0, 0);">LoadingMessage</span>=<span
                style="color: rgb(0, 0, 255);">"Updating time, hold on.."</span>
        <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span
            style="color: rgb(0, 0, 255);">&gt;</span>
    <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">t</span>:UpdatePanelProgress<span
        style="color: rgb(0, 0, 255);">&gt;</span>
</pre>
    </div>
</asp:Content>

